<template>
  <div class="meet-rocord-cell" @click="onClickCell">
    <van-checkbox
      class="check-box-view"
      icon-size="16px"
      v-model="cp_checked"
    ></van-checkbox>
    <van-col>
      <h4>{{ item.subject }}</h4>
      <van-row>
        <p>{{ item.startTime || "" }}</p>
        <p>{{ item.salesMateCustomerName || "" }}</p>
      </van-row>
    </van-col>
    <van-icon name="arrow" />
  </div>
</template>

<script setup lang="js">
import { defineProps, ref, computed } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: {},
  },

  checked: {
    type: Boolean,
    required: true,
  }
});


const cp_checked = computed(() => props.checked)

// const checked = ref(false);
// function onClickCell() {
//   checked.value = !checked.value;
// }
</script>

<style scoped lang="less">
.meet-rocord-cell {
  display: flex;
  flex-direction: row;
  height: 68px;
  width: 100%;
  align-items: center;
  background-color: white;
  margin-bottom: 10px;

  h4 {
    font-size: 14px;
    margin: 0;
    margin-bottom: 4px;
    color: #262626;
  }

  p {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 18px;
    margin: 0 12px 0 0;
  }
}

.check-box-view {
  margin-right: 16px;
}
</style>
